<template>
  <div class="modelBox">
    <div v-if="data">
      <div class="icon" :class="action === 'del' ? 'iconDel' : 'iconAdd'">
        <span v-if="action === 'del'">-</span>
        <span v-else>+</span>
      </div>
      <img :src="require(`../../../../assets/images/${data.name2}.png`)" alt="">
      <p>{{data.name}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['data', 'action']
  }
</script>

<style scoped lang="scss">
  .modelBox{
    padding: 0.3125rem;
    margin-right: 0.5rem;
    margin-bottom: 0.9375rem;
    border-radius: 0.625rem;
    background-color: #F9F9F7;
    font-size: 0.75rem;
    float: left;
    width: 3.75rem;
    height: 3.75rem;
    position: relative;
    text-align: center;
    .iconDel{
      background-color: #F94F4F;
    }
    .iconAdd{
      background-color: #1577FF;
    }
    .icon{
      width: 1.125rem;
      height: 1.125rem;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 0;
    }
    a{
      color: #666;
    }
  }
</style>
